<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购审核列表</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .label_name, .el-form--inline .el-form-item__label{
            width: 100px;
            text-align: right;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 578px; border: 1px solid #eee">
            <el-main>
                <el-row>
                    <el-button type="primary" el-icon-iconName="el-icon-plus" @click="addOrder">添加订单</el-button>
                    <el-input v-model="param" placeholder="请输入搜索内容" clearable style="width: 20%;"></el-input>
                    <el-button icon="el-icon-search" type="primary" circle @click="searchParam"></el-button>
                </el-row>
                <el-divider></el-divider>
                <el-table
                        ref="orderTable"
                        :data="tableData"
                        height="414"
                        border
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                        v-loading="loading"
                        :header-cell-style="{background:'#DCDFE6',color:'#606266'}">
                    <el-table-column
                            prop="orderId"
                            label="采购订单编号"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="applicationType"
                            label="申请类型"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="供应商名称"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productName"
                            label="产品名称"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productNumber"
                            label="产品编号"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="productColor"
                            label="产品颜色"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="demandQuantity"
                            label="需求数量"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="deptName"
                            label="需求部门"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="paymentMethod"
                            label="付款方式"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="applicationTime"
                            label="申请时间"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="approver"
                            label="审核人"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            prop="applicationStatus"
                            label="状态"
                            width="100">
                        <template slot-scope="scope">
                            <span
                                    v-if="scope.row.applicationStatus == 1"
                                    style="background-color: #5daf34;color: gainsboro">
                                已审核
                            </span>
                            <span
                                    v-if="scope.row.applicationStatus == 2"
                                    style="background-color: orange;color: gainsboro">
                                未审核
                            </span>
                            <span
                                    v-if="scope.row.applicationStatus == 3"
                                    style="background-color: red;color: gainsboro">
                                已驳回
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="250">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.applicationStatus == 1 || scope.row.applicationStatus == 3"
                                    icon="el-icon-tickets"
                                    size="normal"
                                    type="success"
                                    @click="showDetail(scope.$index, scope.row)">详情</el-button>
                            <el-button
                                    v-if="scope.row.applicationStatus == 2"
                                    icon="el-icon-view"
                                    size="normal"
                                    type="primary"
                                    @click="audit(scope.$index, scope.row)">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @prev-click="prev"
                        @next-click="next"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        :current-page="current"
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <el-dialog
                        :title="dialogTitle"
                        :visible.sync="dialogFormVisible"
                        :close-on-click-modal="false"
                        @close="closeDialog"
                        width="60%">

                    <el-form :inline="true" :model="detail" ref="form" class="demo-form-inline">
                        <el-main style="border: 1px solid #eee">
                            <el-row :gutter="20">
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">供应商名称：</label>{{detail.companyName}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">产品名称：</label>{{detail.productName}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">产品编号：</label>{{detail.productNumber}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">产品颜色：</label>{{detail.productColor}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">产品分类：</label>{{detail.categoryName}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">需求数量：</label>{{detail.demandQuantity}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">需求部门：</label>{{detail.deptName}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">申请人：</label>{{detail.applicant}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">负责人：</label>{{detail.director}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;width: 350px;">
                                        <label class="label_name">申请时间：</label>{{detail.applicationTime}}
                                    </div>
                                </div></el-col>
                            </el-row>
                            <el-row>
                                <div style="padding-top: 15px;width: 500px;">
                                    <label class="label_name">申请说明：</label>{{detail.description}}
                                </div>
                            </el-row>
                            <el-row :style="{display: detailDialogStyle}">
                                <el-divider></el-divider>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">审核人：</label>{{detail.approver}}
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;">
                                        <label class="label_name">审核状态：</label>
                                        <span
                                                v-if="detail.applicationStatus == 1"
                                                style="background-color: #5daf34;color: gainsboro">已审核</span>
                                        <span
                                                v-if="detail.applicationStatus == 3"
                                                style="background-color: red;color: gainsboro">已驳回</span>
                                    </div>
                                </div></el-col>
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;width: 350px;">
                                        <label class="label_name">审核时间：</label>{{detail.auditTime}}
                                    </div>
                                </div></el-col>
                            </el-row>
                            <el-row :style="{display: detailDialogStyle}">
                                <el-col :span="6"><div class="grid-content bg-purple">
                                    <div style="padding-top: 15px;width: 350px;">
                                        <label class="label_name">审核说明：</label>{{detail.approvalDescription}}
                                    </div>
                                </div></el-col>
                            </el-row>
                            <el-row :style="{display: auditDialogStyle,'margin-top': 20+'px'}">
                                <el-divider></el-divider>
                                <el-form-item
                                        prop="approver"
                                        label="审核人："
                                        :rules="[{ required: true, message: '审核人不能为空'}]">
                                    <el-input v-model="detail.approver" style="width: 200px;" placeholder="请输入审核人姓名"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row :style="{display: auditDialogStyle}">
                                <label class="label_name">审核说明：</label>
                                <el-input
                                        type="textarea"
                                        :rows="3"
                                        placeholder="因货源不足 急需要货源"
                                        v-model="detail.approvalDescription"
                                        maxlength="200"
                                        show-word-limit
                                        style="width: 550px;">
                                </el-input>
                            </el-row>
                        </el-main>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button
                                @click="dealAudit('form',5)"
                                :style="{display: auditDialogStyle}"
                                type="success">通过</el-button>
                        <el-button
                                @click="dealAudit('form','3')"
                                :style="{display: auditDialogStyle}"
                                type="danger">拒绝</el-button>
                        <el-button @click="dialogFormVisible = false">返回</el-button>
                    </div>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</body>
<script>
    var Main = {
        data() {
            return {
                loading: true,
                tableData: [],  //表格数据
                current:1,  //当前行
                total:1,    //总行数
                pageSize:10,    //页码
                pages:1,    //总页数
                param:'',   //搜索
                dialogFormVisible: false,
                dialogTitle:'', //对话框标题
                auditDialogStyle:'',    //审核对话框样式
                detailDialogStyle:'',    //详情对话框样式
                detail:{
                    id:1,
                    orderId:'',  //订单编号
                    companyName:'', //供应商名称
                    productName:'', //产品名称
                    productNumber:'',   //产品编号
                    productColor:'',    //产品颜色
                    categoryName:'',    //商品分类
                    demandQuantity: '', //需求数量
                    estimatedCost:'',   //预计花费
                    deptName:'',    //需求部门
                    applicant:'',   //申请人
                    director:'',    //负责人
                    applicationTime:'', //申请时间
                    description:'', //申请说明
                    auditTime:'',   //审核时间
                    applicationStatus:'',   //审请状态
                    approver:'',    //审核人
                    approvalDescription:'', //审核说明
                }

            }
        },
        methods: {
            //分页上一页
            prev(current){
                this.getPage(current,this.pageSize,this.param);
            },
            //分页下一页
            next(current){
                this.getPage(current,this.pageSize,this.param);
            },
            //分页当前页点击
            currentChange(current){
                this.getPage(current,this.pageSize,this.param);
            },
            sizeChange(pageSize) {
                this.getPage(1,pageSize,this.param);
            },
            //加载数据
            getPage(current,pageSize,param){
                let params = new URLSearchParams();
                params.append("current",current);
                params.append("pageSize",pageSize);
                params.append("param",param);
                axios.get("/purchasing/audit_orders",{params:params}).then(value => {
                    if (value.data.state==1){
                        this.loading = false;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.pages = value.data.data.pages;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            getRow(row){
                this.detail.id = row.id;
                this.detail.orderId = row.orderId;
                this.detail.companyName = row.companyName;
                this.detail.productName = row.productName;
                this.detail.productNumber = row.productNumber;
                this.detail.productColor = row.productColor;
                this.detail.categoryName = row.categoryName;
                this.detail.demandQuantity = row.demandQuantity;
                this.detail.estimatedCost = row.estimatedCost;
                this.detail.deptName = row.deptName;
                this.detail.applicant = row.applicant;
                this.detail.director = row.director;
                this.detail.applicationTime = row.applicationTime;
                this.detail.description = row.description;
                this.detail.auditTime = row.auditTime;
                this.detail.applicationStatus = row.applicationStatus;
                this.detail.approver = row.approver;
                this.detail.approvalDescription = row.approvalDescription;
            },
            //添加订单
            addOrder(){
              window.location="/purchasing_application.html";
            },
            //搜索
            searchParam(){
                this.getPage(1,this.pageSize,this.param);
                this.param = '';
            },
            //关闭对话框触发
            closeDialog(){
                this.$refs['form'].resetFields();
                this.detail.approver = '';
                this.detail.approvalDescription = '';
            },
            //审核
            audit(index,row){
                this.dialogFormVisible = true;
                this.dialogTitle = "采购申请审核";
                //显示审核相关的，隐藏详情
                this.auditDialogStyle='';
                this.detailDialogStyle='none';
                //获取当前行数据
                this.getRow(row);
                //输入框的值返回空
                this.detail.approver = '';
                this.detail.approvalDescription = '';
            },
            //处理申请
            dealAudit(formName,status){
                this.loading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.detail.applicationStatus = status;
                        axios.put("/purchasing/purchase_order",this.detail).then(value => {
                            if (value.data.state==1){
                                this.loading = false;
                                this.sendMessage("审核成功","success");
                                this.dialogFormVisible = false;
                                //刷新页面
                                //判断是否为最后一页
                                if (this.current == this.pages && this.current > 1){
                                    //判断是否为最后一条数据
                                    if (this.total%this.pageSize==1){
                                        this.current -= 1;
                                    }
                                }
                                this.getPage(this.current,this.pageSize,this.param);
                                if (status=="5"){
                                    //延迟跳转
                                    setTimeout("window.location=\"/application_list.html\";",1500);
                                }
                            }else {
                                this.sendMessage("出错啦","error");
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //明细
            showDetail(index,row){
                this.dialogFormVisible = true;
                this.dialogTitle = "采购订单明细";
                //显示详情相关的，隐藏审核
                this.auditDialogStyle='none';
                this.detailDialogStyle='';
                //获取当前行数据
                this.getRow(row);
            },
            //提示信息
            sendMessage(msg,type){
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }
        },
        mounted(){
            //加载数据
            this.getPage(1,this.pageSize,this.param);
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>